import { getTopicAreaCluesList, getTopicAreas } from '@/services/api/api-cues-submit';
import { ActionType, DrawerForm, ProTable } from '@ant-design/pro-components';
import { Button, Select, Timeline } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

interface ProcessLineProps {
  id: string;
}

const EventHandlingProcess: React.FC<ProcessLineProps> = ({ id }) => {
  const [open, setOpenState] = useState(false);
  const [timeLineData, setTimeLineData] = useState([]);
  const [areaOptions, setAreaOptions] = useState([]);
  const [selectArea, setSelectArea] = useState();
  const [areaList, setAreaList] = useState([]);
  const userRef = useRef<ActionType>();
  const getAreaList = async () => {
    const res = await getTopicAreas({ topicId: id });
    if (res.code === 0) {
      return res.data;
    }
  };

  const formatOptions = () => {
    const options = areaList.map((item, index) => ({
      value: item?.eventNum,
      label: <div>{item?.name}</div>,
    }));
    setAreaOptions(options);
    setSelectArea(options[0]?.value)
  };

  const formatData = (index: number) => {
    setTimeLineData([]);
  };

  const onChange = (value: string) => {
    console.log(`selected ${value}`);
    setSelectArea(value);
    userRef?.current?.reset();
    // formatData(Number(value));
  };

  const onSearch = (value: string) => {
    console.log('search:', value);
  };

  useEffect(() => {
    if (areaList.length > 0) {
      formatOptions();
    }
  }, [areaList]);
  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    if(selectArea){
      const response = await getTopicAreaCluesList({
        eventNum: selectArea,
      });
      return Promise.resolve({
        data: response.data,
        total: response.total,
        success: response.code === 0,
      });
    }
  };
  return (
    <DrawerForm
      title="查看镇街线索"
      trigger={<Button>查看镇街线索</Button>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 1050,
      }}
      open={open}
      onOpenChange={async (visible) => {
        setOpenState(visible);
        if (visible) {
          const areas = await getAreaList();
          setAreaList(areas);
        }
      }}
      submitter={false}
      onFinish={async (values) => {}}
    >
      {areaList.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Select
          value={selectArea}
            showSearch
            placeholder='选择一个区县'
            optionFilterProp="label"
            onChange={onChange}
            onSearch={onSearch}
            options={areaOptions}
          />
        </div>
      )}
    {selectArea&&  <ProTable<CuesSubmitData.SubmitPage>
        columns={[
          {
            title: '单位',
            key: 'name',
            dataIndex: 'name',
            width: '180px',
            search: false,
            align: 'center',
          },
          {
            disable: true,
            title: '状态',
            dataIndex: 'state',
            filters: true,
            onFilter: true,
            ellipsis: true,
            width: '180px',
            valueType: 'select',
            valueEnum: {
              0: {
                text: '未办理',
                status: 'Error',
              },
              1: {
                text: '已办理',
                status: 'Success',
                disabled: true,
              },
            },
          },
          {
            title: '报送线索',
            dataIndex: 'content',
            copyable: true,
            ellipsis: true,
            key: 'content',
          },
          {
            title: '报送时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: '180px',
            align: 'center',
            search: false,
          },
        ]}
        request={request}
        ghost
        rowKey="id"
        dateFormatter="string"
        bordered
        options={false}
      actionRef={userRef}
        search={false}
        cardProps={{
          style: {
            padding: 0,
          },
        }}
        toolbar={{
          style: {
            marginTop: 10,
          },
        }}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
      />}
    </DrawerForm>
  );
};

export default EventHandlingProcess;
